<template>
	<div class="indexLayout flex">
		<div class="musicPage flex">
			<div class="pageLeft scrollbar">
				<div class="logoFlex flex">
					<nuxt-link class="a" to="/">
						<img src="https://pc.meitudata.com/x-design/img/logo2-dark.90ec4009.svg" class="img" />
					</nuxt-link>
				</div>
				<div class="navFlex flex" v-for="(item, index) in navList.list">
					<div class="h3 ell" v-if="item.h3">{{ item.h3 }}</div>
					<template v-for="(prop, i) in item.list">
						<nuxt-link v-if="prop.nuxtLink" :to="prop.path" class="item flex" :class="prop.path == navList.activePath ? 'active' : ''">
							<span class="iconfont" :class="prop.icon" :style="prop.iconStyle"></span>
							<div class="text ell">{{ prop.name }}</div>
							<div class="tag" v-if="prop.tag">{{ prop.tag }}</div>
						</nuxt-link>
						<a v-else class="item flex" @click="routerTap(prop)" :class="prop.path == navList.activePath ? 'active' : ''">
							<span class="iconfont" :class="prop.icon" :style="prop.iconStyle"></span>
							<div class="text ell">{{ prop.name }}</div>
							<div class="tag" v-if="prop.tag">{{ prop.tag }}</div>
						</a>
					</template>
				</div>
			</div>
			<div class="pageRight flex scrollbar">
				<div class="rightHead flex">
					<div class="left flex">
						<nuxt-link to="/" class="backPage flex" v-if="navList.activePath.indexOf('/index/detail/') !== -1">
							<span class="iconfont icon-xiangzuo1"></span>
							<span class="text">返回上一页</span>
						</nuxt-link>
						<div class="leftH3 ell" v-else-if="activeRoute">{{ activeRoute.name }}</div>
					</div>
					<div class="right flex">
						<div class="vipFlex flex" @click="$refs.vip.open()">
							<img class="vip" src="/img/vip.png" />
							<span class="vipText">开通会员畅想创作</span>
							<img class="try" src="/img/jf.png" />
							<span class="tryText">可试用1次</span>
						</div>
						<el-dropdown v-if="!true">
							<div class="user flex">
								<img src="/img/default.webp" />
								<i class="iconfont icon-right-1-copy"></i>
							</div>
							<el-dropdown-menu slot="dropdown" placement="bottom">
								<el-dropdown-item>会员</el-dropdown-item>
								<el-dropdown-item>设置</el-dropdown-item>
								<el-dropdown-item>退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<div class="user flex" v-else @click="$refs.login.open()">
							<img src="/img/default.webp" />
						</div>
					</div>
				</div>
				<div class="rightMain">
					<nuxt></nuxt>
				</div>
			</div>
		</div>
		<commonPlayFooter ref="commonPlayFooter" />
		<login ref="login" />
		<vip ref="vip" />
		<app ref="app" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 导航栏
				navList: {
					activePath: this.$route.path,
					list: [
						{
							h3: "",
							list: [
								{
									icon: "icon-shouye",
									iconStyle: "font-size: 18px",
									name: "音乐首页",
									path: "/index",
									nuxtLink: true,
								},
								{
									icon: "icon-paihangbang",
									iconStyle: "font-size: 15px",
									name: "热歌排行榜",
									path: "/index/top",
									nuxtLink: true,
								}
							]
						},
						{
							h3: "与我相关",
							list: [
								{
									icon: "icon-yinle2",
									iconStyle: "font-size: 22px",
									name: "开始创作",
									path: "/index/create",
									nuxtLink: true,
								},
								{
									icon: "icon-jilu-02",
									iconStyle: "font-size: 20px",
									name: "记录",
									path: "/my/record",
									nuxtLink: true,
								},
								{
									icon: "icon-huiyuan",
									iconStyle: "font-size: 15px",
									name: "会员中心",
									path: "/vip",
									tag: "限时优惠",
									nuxtLink: false,
								},
								{
									icon: "icon-gerenzhongxin",
									iconStyle: "font-size: 17px",
									name: "我的主页",
									path: "/my/person",
									nuxtLink: true,
								}
							],
						},
						{
							h3: "更多",
							list: [
								{
									icon: "icon-shezhi1",
									iconStyle: "font-size: 19px",
									name: "设置页",
									path: "/my/set",
									nuxtLink: true,
								},
								{
									icon: "icon-shouji-F",
									iconStyle: "font-size: 19px",
									name: "App",
									path: "/app",
									nuxtLink: false,
								},
								{
									icon: "icon-kefu1",
									iconStyle: "font-size: 21px",
									name: "在线客服",
									path: "/service",
									nuxtLink: false,
								},
							]
						}
					]
				},
				
			}
		},
		watch: {
			
			// 路由发生改变
			$route(to, from){
				this.navList.activePath = to.path;
			},
			
		},
		methods: {
			
			// 路由跳转
			routerTap(item){
				if(item.path === "/vip"){
					this.$refs.vip.open();
				}else if(item.path === "/service"){
					window.open("https://work.weixin.qq.com/kfid/kfc65b6032db432da19", "_blank");
				}else if(item.path === "/app"){
					this.$refs.app.open();
				}
			},
			
		},
		computed: {
			
			// 当前选中的导航
			activeRoute(){
				let routeItem = null;
				this.navList.list.map((item, index) => {
					item.list.map((prop, i) => {
						if(this.navList.activePath == prop.path){
							routeItem = prop;
						}
					});
				});
				return routeItem;
			},
			
		},
		mounted(){
		
		},
	}
</script>

<style lang="scss" scoped>
	.indexLayout{
		width: 100vw;
		height: 100vh;
		flex-direction: column;
		.musicPage{
			flex: 1;
			height: 0;
			width: 100%;
			background: #0f1115;
			position: relative;
			$headHeight: 80px;
			overflow-x: auto;
			&:hover {&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb {visibility: visible;}}
			&::-webkit-scrollbar {width: 3px;height: 3px;}
			&::-webkit-scrollbar-track,
			&::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;visibility: hidden;}
			&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}
			&::-webkit-scrollbar-thumb {min-height: 0px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}
			&::-webkit-scrollbar-corner {background: transparent;}
			&:before{
				background: linear-gradient(168deg, #05eeff 5.03%, #7ea2ff 91.4%);
				border-radius: 50%;
				content: "";
				-webkit-filter: blur(130px);
				filter: blur(130px);
				height: 80px;
				left: 0;
				pointer-events: none;
				position: absolute;
				top: 0;
				width: 120px;
				z-index: 1;
			}
			&:after{
				background: url("/img/icon_template3_cover.png")no-repeat center center;
				background-size: cover;
				border-radius: 50%;
				content: "";
				filter: blur(60px);
				height: 220px;
				right: 0;
				pointer-events: none;
				position: absolute;
				top: 0;
				width: 220px;
				z-index: 1;
			}
			.pageLeft{
				position: relative;
				z-index: 2;
				width: 255px;
				height: 100%;
				flex-shrink: 0;
				padding: 0 18px;
				overflow-y: auto;
				.logoFlex{
					height: $headHeight;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.a{
						width: 140px;
						.img{
							display: block;
							width: 100%;
						}
					}
				}
				.navFlex{
					flex-direction: column;
					padding-bottom: 10px;
					margin-bottom: 10px;
					position: relative;
					&:after{
						content: "";
						position: absolute;
						bottom: 0;
						left: 5%;
						right: 5%;
						background: rgba(255,255,255,0.06);;
						height: 1px;
					}
					&:nth-last-child(1){
						margin-bottom: 0;
						&:after{ display: none; }
					}
					.h3{
						color: rgba(255,255,255,0.65);
						font-size: 14px;
						font-weight: 300;
						line-height: 30px;
						padding: 0 18px;
						margin-bottom: 3px;
					}
					.item{
						flex-direction: row;
						align-items: center;
						height: 45px;
						padding: 0 15px;
						border-radius: 8px;
						transition: 0.2s all;
						cursor: pointer;
						margin-bottom: 10px;
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.iconfont{
							font-size: 18px;
							width: 23px;
							margin-right: 10px;
							color: rgba(255,255,255,0.5);
							text-align: center;
						}
						.text{
							font-size: 15px;
							color: rgba(255,255,255,0.7);
							font-weight: bold;
						}
						.tag{
							background: #404b4a;
							font-size: 11px;
							color: #FFF;
							padding: 0 5px;
							line-height: 18px;
							border-radius: 20px 20px 20px 6px;
							margin-left: 10px;
						}
						&.active, &:hover{
							background: rgba(204, 221, 255, .06);
							.iconfont{
								color: #ebf8ff;
							}
							.text{
								color: #ebf8ff;
							}
						}
					}
				}
			}
			.pageRight{
				position: relative;
				z-index: 2;
				flex: 1;
				width: 0;
				min-width: 1000px;
				height: 100%;
				flex-direction: column;
				padding-right: 18px;
				overflow: hidden;
				.rightHead{
					height: $headHeight;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					position: relative;
					z-index: 5;
					.left{
						flex-direction: row;
						align-items: center;
						.backPage{
							padding: 0 35px;
							flex-direction: row;
							align-items: center;
							transition: 0.2s all;
							cursor: pointer;
							&:hover{
								opacity: 0.8;
							}
							.iconfont{
								color: rgba(255,255,255,0.6);
								font-size: 16px;
							}
							.text{
								color: rgba(255,255,255,0.6);
								font-size: 16px;
								margin-left: 5px;
							}
						}
						.leftH3{
							font-size: 18px;
							color: #ebf8ff;
						}
					}
					.right{
						flex-direction: row;
						align-items: center;
						.vipFlex{
							flex-direction: row;
							align-items: center;
							border: 1px solid rgba(255,255,255,0.13);
							padding: 5px 10px 5px 5px;
							border-radius: 100px;
							cursor: pointer;
							transition: 0.2s all;
							&:hover{
								opacity: 0.85;
							}
							.vip{
								width: 34px;
							}
							.vipText{
								font-size: 13px;
								color: rgba(255,255,255,0.8);
								margin-left: 6px;
								padding-right: 10px;
								position: relative;
								&:after{
									content: "";
									top: 50%;
									right: 0;
									height: 80%;
									width: 1px;
									background: rgba(255,255,255,0.2);
									transform: translate(0, -50%);
									position: absolute;
								}
							}
							.try{
								width: 20px;
								margin-left: 10px;
							}
							.tryText{
								font-size: 13px;
								color: #ebf8ff;
								margin-left: 6px;
							}
						}
						.user {
							margin-left: 20px;
							flex-direction: row;
							cursor: pointer;
							align-items: center;
							i {
								margin-left: 10px;
								font-size: 16px;
								transform: rotate(90deg);
								color: rgba(255,255,255,0.5);
							}
							img {
								width: 40px;
								height: 40px;
								border-radius: 50%;
							}
						}
					}
				}
				.rightMain{
					flex: 1;
					height: 0;
				}
			}
		}
	}
</style>